<template>
  <ul class="linear">
    <li v-for="(item, index) in list.split(',')" :key="index" class="linear-item">{{ item }}</li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Linear',
  props: {
    list: String
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.linear {
  display: flex;
  &-item {
    margin-left: 20px;
    padding: 10px;
    border: 1px solid#909399;
  }
}
</style>
